// 

// @ts-ignore
import { PolygonLayer, Scene } from '@antv/l7';
// @ts-ignore
import { GaodeMap, Map,Mapbox, GaodeMapV1 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
const data = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -180,
              -90
            ],
            [
              -180,
              90
            ],
            [
              180,
              90
            ],
            [
              180,
              -90
            ],
            [
              -180,
              -90
            ]
          ],
          [
            [
              105.5815853942313,
              29.71236446366261
            ],
            [
              105.58430314673814,
              29.711392515200814
            ],
            [
              105.58472461637894,
              29.711203173496614
            ],
            [
              105.58469554950659,
              29.710837111855113
            ],
            [
              105.5845356817128,
              29.710332197057085
            ],
            [
              105.58449208140422,
              29.709978755188033
            ],
            [
              105.58444848109718,
              29.70967580402356
            ],
            [
              105.58447754796947,
              29.709309736814248
            ],
            [
              105.58452114827668,
              29.70893104519307
            ],
            [
              105.58478275012226,
              29.70870382953494
            ],
            [
              105.58521875319786,
              29.707996933088538
            ],
            [
              105.58549488847967,
              29.707757092091867
            ],
            [
              105.58526234713759,
              29.70748948515464
            ],
            [
              105.5850298121643,
              29.707300136090566
            ],
            [
              105.58475367688249,
              29.707060293429635
            ],
            [
              105.58401247165273,
              29.70695930687515
            ],
            [
              105.58340206734715,
              29.706833073538547
            ],
            [
              105.58309686519294,
              29.70664372323681
            ],
            [
              105.58305326488585,
              29.70649224273795
            ],
            [
              105.58266086211734,
              29.706277644973994
            ],
            [
              105.58237019339936,
              29.706100917059004
            ],
            [
              105.581745254169,
              29.705633849344423
            ],
            [
              105.58116391673298,
              29.7053435086015
            ],
            [
              105.58052444555511,
              29.7053435086015
            ],
            [
              105.58000124186378,
              29.705419249745532
            ],
            [
              105.57982684063381,
              29.7054444967809
            ],
            [
              105.57924550319922,
              29.70574746071088
            ],
            [
              105.57898390135358,
              29.70620190489163
            ],
            [
              105.57895483459976,
              29.706656347063984
            ],
            [
              105.57872229751007,
              29.70683307283619
            ],
            [
              105.57860603002342,
              29.707136032577154
            ],
            [
              105.57860603002342,
              29.70746423793102
            ],
            [
              105.57876589781864,
              29.707704079627163
            ],
            [
              105.57886763200304,
              29.708044906343105
            ],
            [
              105.57915830071966,
              29.708246877167795
            ],
            [
              105.57955070348811,
              29.708549832643413
            ],
            [
              105.5802773752817,
              29.70849934012719
            ],
            [
              105.58084417928154,
              29.70857507889164
            ],
            [
              105.5811348479981,
              29.70872655624804
            ],
            [
              105.58144005015237,
              29.70885278720435
            ],
            [
              105.5811720640055,
              29.709614475400542
            ],
            [
              105.58114299713321,
              29.709879557881166
            ],
            [
              105.5811720640055,
              29.710283491743866
            ],
            [
              105.5812011308766,
              29.71051070382748
            ],
            [
              105.58111393026093,
              29.710826275312897
            ],
            [
              105.58108486338989,
              29.711192336993292
            ],
            [
              105.58111393026093,
              29.711432169784118
            ],
            [
              105.58124473118363,
              29.71184872011284
            ],
            [
              105.5813755321065,
              29.712189532732367
            ],
            [
              105.5815853942313,
              29.71236446366261
            ]
          ]
        ]
      }
    }
  ]
}
export default () => {
  useEffect(() => {
    const scene = new Scene({
      id: 'map',
      map: new Map({
        center: [105.58430314673814,
          29.711392515200814],
        style: 'light',
        zoom: 10
      })
    });
    // @ts-ignore
    window.scene = scene;

    const fill = new PolygonLayer({
      autoFit: false
    })
      .source(data)
      .shape('fill')
      .color('red')
      .style({
        opacity: 1,

      });
    const line = new PolygonLayer({
      autoFit: false
    })
      .source(data)
      .shape('line')
      .size(2)
      .color('rgb(255, 48, 107)')
      .style({
        opacity: 1,

      });

    scene.addLayer(fill);
    scene.addLayer(line);
    // scene.on('zoom', () => {
    //   console.log(scene.getZoom(), scene.getCenter())
    // })


  }, []);
  return (
    <div
      id="map"
      style={{
        height: '500px',
        position: 'relative',
      }}
    />
  );
};
